/* 
Tool Cool Range Slider - Themes CSS Plugin v1.0.0
https://github.com/mzusin/toolcool-range-slider 
MIT License        
Copyright (c) 2022-present, Miriam Zusin                        
*/
.theme-target {
  --panel-bg: #d7dcdf;
  --panel-bg-hover: #ccd1d3;
  --panel-bg-fill: #47a4bc;
  --pointer-bg: #f7f7f7;
  --pointer-bg-hover: #00aaf3;
  --pointer-bg-focus: #00aaf3;
  --pointer-shadow: 0 0 0 3px #f7f7f7, 0 0 0 5px #00aaf3;
  --pointer-shadow-hover: 0 0 0 3px #f7f7f7, 0 0 0 5px #00aaf3;
  --pointer-shadow-focus: 0 0 0 3px #f7f7f7, 0 0 0 5px #00aaf3;
  --pointer-border: 0;
  --pointer-border-hover: 0;
  --pointer-border-focus: 0;
}
.theme-glass {
  --pointer-bg: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(206, 206, 206, 1) 48%,
    rgba(255, 255, 255, 0) 100%
  );
  --pointer-bg-hover: linear-gradient(
    to bottom,
    rgba(206, 206, 206, 1) 0%,
    rgba(255, 255, 255, 0) 48%,
    rgba(206, 206, 206, 1) 100%
  );
  --pointer-bg-focus: linear-gradient(
    to bottom,
    rgba(206, 206, 206, 1) 0%,
    rgba(255, 255, 255, 0) 48%,
    rgba(206, 206, 206, 1) 100%
  );
  --pointer-border-radius: 3px;
}
.theme-rect {
  --panel-bg: #9fd2fa;
  --panel-bg-hover: #4075e2;
  --panel-bg-fill: #4075e2;
  --pointer-width: 10px;
  --pointer-height: 20px;
  --pointer-bg: #4075e2;
  --pointer-bg-hover: #4075e2;
  --pointer-bg-focus: #4075e2;
  --pointer-border: 0;
  --pointer-border-hover: 0;
  --pointer-border-focus: 0;
  --pointer-shadow: none;
  --pointer-shadow-hover: none;
  --pointer-shadow-focus: none;
  --pointer-border-radius: 0;
}
.theme-circle {
  --height: 0.3rem;
  --panel-bg: #e6e6e6;
  --panel-bg-hover: #e6e6e6;
  --panel-bg-fill: #60cd17;
  --pointer-width: 1.5rem;
  --pointer-height: 1.5rem;
  --pointer-bg: #333940;
  --pointer-bg-hover: #333940;
  --pointer-bg-focus: #333940;
  --pointer-shadow: 0px 4px 25px rgb(0, 0, 0, 0.5);
  --pointer-shadow-hover: 0px 4px 25px rgb(0, 0, 0, 0.5);
  --pointer-shadow-focus: 0px 4px 25px rgb(0, 0, 0, 0.5);
  --pointer-border: 6px solid #fff;
  --pointer-border-hover: 6px solid #fff;
  --pointer-border-focus: 6px solid #fff;
}
.theme-rainbow {
  --panel-bg: linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 154, 0, 1) 10%,
    rgba(208, 222, 33, 1) 20%,
    rgba(79, 220, 74, 1) 30%,
    rgba(63, 218, 216, 1) 40%,
    rgba(47, 201, 226, 1) 50%,
    rgba(28, 127, 238, 1) 60%,
    rgba(95, 21, 242, 1) 70%,
    rgba(186, 12, 248, 1) 80%,
    rgba(251, 7, 217, 1) 90%,
    rgba(255, 0, 0, 1) 100%
  );
  --panel-bg-hover: var(--panel-bg);
  --panel-bg-fill: rgba(0, 0, 0, 0.6);
  --pointer-width: 1.7rem;
  --pointer-height: 1.7rem;
  --pointer-bg: #fff;
  --pointer-bg-hover: #dcdcdc;
  --pointer-bg-focus: #dcdcdc;
  --pointer-border: 0;
  --pointer-border-hover: 0;
  --pointer-border-focus: 0;
}
.theme-ruler {
  --height: 1rem;
  --panel-bg-border-radius: 2px;
  --panel-bg: #fff;
  --panel-bg-hover: #fff;
  --panel-bg-fill: #ccc;
}
.theme-ruler .panel {
  background-size: 0.4rem 100%;
  background-repeat: repeat-x;
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) calc(50% - 2px),
    var(--panel-bg-fill, #000) 50%,
    rgba(0, 0, 0, 0) calc(50% + 2px)
  );
}